<template>
	<view>
		<view class="venueForm">
			<view>
				<view style="font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;">请上传知识图片</view>
				<view style="color: #888888;font-size: 26rpx;line-height: 70rpx;">图片宽高建议750*339px</view>
			</view>
			<view>
				<u-upload name="img" :fileList="imgList"  @afterRead="onUpload($event, 'img')"
						@delete="onDelete($event, 'img')"  :maxCount="1"
					width="208rpx" height="208rpx">
				</u-upload>
			</view>
		</view>
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>知识标题</view>
					<input class="fvalue" v-model="knowledgeInfo.knowledgeTitle"  placeholder="输入知识标题"  />
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>知识标签</view>
					<view class="fvalue" >
						<picker mode="selector" :range="knowledgeHealthTypeList" range-key="dictValue" @change="onknowledgeHealthTypeChange">
							<view class="fvalue" >
								{{ knowledgeInfo.knowledgeTagsName || '选择知识标签' }}
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			<view class="textareaTitle"><text class="required">*</text>知识内容</view>
			<view style="border: 1px solid #c3c3c3;">
				<textarea v-model="knowledgeInfo.knowledgeContent" style="width: 640rpx;padding: 20rpx;  height: 200rpx;font-size: 32rpx;" placeholder="请输入知识介绍"></textarea>
			</view>
		</view>
		
		<view style="padding-top: 30rpx;position: sticky;bottom: 0px;z-index: 10;background-color: #ffffff;">
			<view style="padding: 20rpx 40rpx;">
				<u-button text="保 存" @click="submitKnowledgeApply" color="#155CCF"></u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//知识ID，用来辨别是否编辑
				sportKnowledgeId: '',
				//知识标签
				knowledgeHealthTypeList: [],
				//图库首页图片
				imgList: [],
				//提交表单
				knowledgeInfo: {
					//知识名称
					knowledgeTitle: '',
					//知识图片
					img: '',
					//是否线上（0:线下，1：线上）
					isOnline: '1',
					//知识标签
					knowledgeTags: '',
					//知识标签名称
					knowledgeTagsName: '',
					//内容
					knowledgeContent: ''
				}
			}
		},
		onLoad(option) {
			//知识ID
			var sportKnowledgeId = option.id;
			this.sportKnowledgeId = sportKnowledgeId;
			
			var venueId = uni.getStorageSync('venueId');
			var identity = uni.getStorageSync('identity');
			this.initData();
		},
		methods: {
			//初始化加载
			async initData(){
				if(this.sportKnowledgeId ){
					await this.sportKnowledgeDetail();
				}
				await this.knowledgeHealthTypeDict();
			},
			//知识详情
			sportKnowledgeDetail(){
				return new Promise((resolve, reject) => {
					var params = {};
					params.healthKnowledgeId = this.sportKnowledgeId;
					params.userId = uni.getStorageSync('userId');
					this.$request({
						url: '/blade-merchant-app/merchant-app/sportKnowledge/detail',
						type: 'GET',
						data: params
					}).then(res => {
						uni.hideLoading();
						var knowledgeData = res.data;
						this.knowledgeInfo = {
							//知识名称
							knowledgeTitle: knowledgeData.knowledgeTitle,
							//知识图片
							img: knowledgeData.img,
							//知识标签
							knowledgeTags: knowledgeData.knowledgeTags,
							//知识标签名称
							knowledgeTagsName: '',
							//内容
							knowledgeContent: knowledgeData.knowledgeContent
						};
						this.imgList.push({ url: knowledgeData.img });
						resolve(knowledgeData); 
					}).catch(err =>{
						reject(err); 
					})
				})
			},
			//知识标签字典
			knowledgeHealthTypeDict(){
				return new Promise((resolve, reject) => {
					this.$request({
						url: '/blade-client-business/app/dict/getDictList',
						type: 'GET',
						data: {'code': 'knowledge_health_type'}
					}).then(res => {
						this.knowledgeHealthTypeList = res.data;
						if(this.knowledgeInfo.knowledgeTags){
							var knowledgeObject = res.data.find(item => {
								return this.knowledgeInfo.knowledgeTags == item.dictKey;
							});
							if(knowledgeObject){
								this.knowledgeInfo.knowledgeTagsName = knowledgeObject.dictValue;
							}
						}
						resolve(res.data); // 操作成功，处理结果
					}).catch(err =>{
						reject(err); 
					})
				});
			},
			//知识标签改变事件
			onknowledgeHealthTypeChange(event) {
				const selectedIndex = event.detail.value; // 获取用户选择的选项索引
				const selectedOption = this.knowledgeHealthTypeList[selectedIndex]; // 获取用户选择的选项信息
				this.knowledgeInfo.knowledgeTagsName = selectedOption.dictValue;
				this.knowledgeInfo.knowledgeTags = selectedOption.dictKey;
			},
			//下一步保存按钮事件
			submitKnowledgeApply(){
				if(this.imgList.length<=0){
					uni.$u.toast("请上传知识图片")
					return ;
				}
				if(!this.knowledgeInfo.knowledgeTitle){
					uni.$u.toast("请输入知识名称")
					return ;
				}
				if(!this.knowledgeInfo.knowledgeTags){
					uni.$u.toast("请选择知识标签")
					return ;
				}
				if(!this.knowledgeInfo.knowledgeContent){
					uni.$u.toast("请输入知识内容")
					return ;
				}
				
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认保存?',
					success: function(res) {
						if (res.confirm) {
							that.saveOrUpdate();
						}
					}
				});
			},
			//提交保存
			saveOrUpdate(){
				const params = {
					...this.knowledgeInfo
				};
				
				params.img = this.imgList.map(item => item.url).join(',');
				
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				var saveUrl = '/blade-merchant-app/merchant-app/sportKnowledge/save';
				if(this.sportKnowledgeId){
					saveUrl = '/blade-merchant-app/merchant-app/sportKnowledge/update';
					params.id =  this.sportKnowledgeId;
				}
				
				
				this.$request({
					url: saveUrl,
					type: 'POST',
					data: params
				}).then(res => {
					uni.hideLoading();
					if(res.code == 200){
						uni.showModal({
						   title: '保存成功',
						   content: '您可以在知识库中管理自己新增的知识内容',
						   showCancel: false,
						   success: function (res) {
							   if (res.confirm) {
								    uni.navigateBack()
							   }
						   }
						});
					} else {
						uni.showModal({
						   title: '保存失败',
						   content: res.msg,
						   showCancel: false,
						   success: function (res) {}
						});
					}
				}).catch(err =>{
					
				})
			},
			// 上传文件
			onUpload(files, type) {
				const {
					file
				} = files;
				let index = this[`${type}List`].length;
				this[`${type}List`].push({
					...file,
					status: 'uploading',
					message: '上传中'
				})
				this.$utils.onUploadFile(file.url)
					.then(res => {
						let item = this[`${type}List`][index];
						this[`${type}List`].splice(index, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: res.data.link
						}))
					})
			},
			// 删除图片
			onDelete(e, type) {
				this[`${type}List`].splice(e.index, 1);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
		
		.bg-f1f1f1 {
			background: #f1f1f1;
		}
		
		.height30 {
			height: 30rpx;
		}
		
		.venueForm {
			padding: 40rpx;
			background-color: #ffffff;
			
			.textareaTitle {
				padding-bottom: 20rpx;font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;
				
				.required {
					color: red;
				}
			}
			
			.form-row {
				border-radius: 0rpx;display: flex;border: 1px solid #c3c3c3;justify-content: center;align-items: center; 
				
				.ftitle {
					text-align: center;
					font-size: 30rpx;
					width: 180rpx;
					display: inline-table;
					color: #333333;
					padding:0rpx 10rpx;
					
					.required {
						color: red;
					}
				}
				.fvalue {
					height: 90rpx;width: 100%;font-size: 32rpx;line-height: 90rpx;
				}
			
			}
			
			
			.submitBtn {
				height: 90rpx;background-color: #0544ab;color: #ffffff;line-height: 90rpx;font-size: 32rpx;
			}
			
		}
		
	}

</style>
